<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="outer">
    <ul id="inner">
        <li>tomcat</li>
        <li>jboss</li>
        <li>jetty</li>
    </ul>
    <input type="text" >
</div>
<button type="button" id="firstButton">修改DOM元素</button>
<button type="button" id="secondButton">解除事件</button>
<script type="text/javascript">
    let dblclickFunction = function(){
        console.log( "鼠标双击") ;
    } ;
    $(function (){
        $("#firstButton").bind( "dblclick" , dblclickFunction );
        $("#secondButton").bind( "click" , function(){
            $("#firstButton").unbind( "dblclick" , dblclickFunction ) ;
        });

        /*$("#inner").mouseleave(function (){
               alert("再见le您嘞");
            });*/

        //元素失去焦点
        $("input").focus(function(){
            $(this).css("background-color","lightpink");
        });

        $("input").bind("mouseover",function(){
            $(this).css("background-color","red");
        })
    }) ;
</script>
</body>
</html>